<template>
  <div class="bigVideo">
    <div class="cover">
      <span class="duration">{{ duration }}</span>
      <span class="userName">{{ userName }}</span>
    </div>
    <video ref="video" autoplay v-show="camera" :muted="tools.isSelf(this.id)"></video>
    <videoCover :id="id" type="big" v-show="!camera"></videoCover>
  </div>
</template>

<script>
import videoCover from './videoCover'
export default {
  name: 'BigVideo',
  props: {
    // id
    id: {
      type: Number
    },
    // 摄像头
    camera: {
      type: Boolean
    },
    // 媒体流
    stream: {
      type: MediaStream
    }
  },
  data () {
    return {
      // 会议持续时间
      duration: '',
      timer: null

    }
  },
  components: {
    videoCover
  },
  computed: {
    userName () {
      if (this.id) {
        return this.$store.state.chatInformation.userList[this.id].user_name
      } else {
        return ''
      }
    },
    // 会议开始时间
    startTime () {
      return this.$store.state.conferenceRoom.cf_start_time
    }
  },
  watch: {
    // 监听stream
    stream: {
      immediate: true,
      deep: true,
      handler (val) {
        if (val) {
          this.$nextTick(() => {
            if (this.$refs.video) {
              this.$refs.video.srcObject = val
              this.$refs.video.onloadedmetadata = () => {
                this.$refs.video.play()
              }
              this.$refs.video.addEventListener('pause', () => {
                if (this.$refs.video) {
                  this.$refs.video.play()
                }
              })
              this.$refs.video.addEventListener('ended', () => {
              }, false)
            }
          })
        }
      }
    }
  },
  created () {
    this.timer = setInterval(() => {
      const nowTime = +new Date()
      const startTime = +new Date(this.startTime)
      const allSecs = Math.floor((nowTime - startTime) / 1000)
      const mins = Math.floor(allSecs / 60) >= 10 ? Math.floor(allSecs / 60) : ('0' + Math.floor(allSecs / 60))
      const secs = allSecs % 60 >= 10 ? allSecs % 60 : ('0' + allSecs % 60)
      this.duration = mins + ':' + secs
    }, 1000)
  },
  beforeDestroy () {
    clearInterval(this.timer)
  }
}
</script>

<style scoped lang="scss">
.bigVideo {
  width: 100%;
  height: 100%;

  .cover {
    position: absolute;
    z-index: 99;
    width: 100%;
    height: 100%;

    .userName {
      position: absolute;
      right: 20px;
      color: #fff;
      font-size: 16px;
      bottom: 8px;
    }

    .duration {
      position: absolute;
      right: 30px;
      top: 24px;
      height: 32px;
      line-height: 32px;
      background-color: rgba(12,23,47,0.60);
      color: #fff;
      font-size: 16px;
      padding-left: 40px;
      padding-right: 16px;
      background-image: url("../../../assets/videoCall/time.png");
      background-size: 24px 24px;
      background-position: 8px center;
      background-repeat: no-repeat;
    }
  }

  video {
    width: 100%;
    height: 100%;
  }
}
</style>
